<template>
    <div class="page-wrap" v-loading="loading">
        <div class="header-box">
            <div class="logo-box">
                <img src="@/assets/logo.png" alt="">
                <span>Element-UI admin</span>
            </div>
            <div></div>
        </div>
        <div class="form-wrap">
            <div class="form-card">
                <h2>登录</h2>
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0" class="demo-ruleForm">
                    <el-form-item label="" prop="userName">
                        <el-input v-model="ruleForm.userName" prefix-icon="el-icon-user"></el-input>
                    </el-form-item>
                    <el-form-item label="" prop="password">
                        <el-input v-model="ruleForm.password" show-password prefix-icon="el-icon-goods" @keyup.enter.native="handleClickLogin"></el-input>
                    </el-form-item>
                    <div>
                        <el-button type="primary" style="width:100%;" @click="handleClickLogin">登录</el-button>
                    </div>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from 'vuex'
//引入接口配置
import { loginApi } from '@/api/login'

export default {
    name: 'login',
    data() {
        return {
            ruleForm: {
                userName: "",
                password: ""
            },
            rules: {
                userName: [
                    { required: true, message: '请输入用户名', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 6, max: 12, message: '密码长度在 6 到 12 个字符', trigger: 'blur' }
                ]
            },

            loading: false
        }
    },
    created(){
        //初始化输入框
        this.initInput()
    },
    methods: {
        //通用修改store的方法
        ...mapMutations(['commonUpdateState']),
        //初始化菜单
        ...mapActions(['menuInit']),
        //初始化输入框
        initInput(){
            try {
                //读取并解析本地用户记录
                var userInfo = window.localStorage.getItem('userInfo')
                userInfo = userInfo? JSON.parse(userInfo):{}
                //填入输入框
                this.ruleForm.userName = userInfo.userName || ""
            } catch (error) {
                console.log(error)
            }
        },
        //点击登录
        handleClickLogin(){
            //表单校验
            this.$refs['ruleForm'].validate((valid) => {
                if (valid) {
                    //发起登录请求
                    this.requestLogin()
                } else {
                    console.log('error submit!!')
                    return false
                }
            })
        },
        //发起登录请求
        async requestLogin(){
            try {
                //开启加载状态
                this.loading = true
                 //登录参数
                 var loginData = {
                    ...this.ruleForm,
                    ClientType: "pc"
                }
                //请求
                const result = await loginApi(loginData)
                //关闭加载状态
                this.loading = false
                //处理返回
                if (result.code == 1) {
                    //保存token
                    window.localStorage.setItem('_token', result.data.token)
                    //保存用户信息
                    window.localStorage.setItem('userInfo', JSON.stringify(result.data))
                    //保存到store
                    this.commonUpdateState({
                        key: "userInfo", value: result.data
                    })
                    //提示登录成功
                    this.$message.success('登录成功！')
                    //菜单初始化
                    this.menuInit(this)
                    //跳转首页
                    setTimeout(()=>{
                        this.$router.push('/')
                    },1000)
                   
                }else{
                    //提示登录失败
                    this.$message.error(result.msg)
                }
            } catch (error) {
                console.log('error', error)
                //关闭加载状态
                this.loading = false
            }
        }
    },
}
</script>

<style scoped lang="scss">
.page-wrap{
    color: #fff;
    padding: 30px;
    .header-box{
        display: flex;
        align-items: center;
        justify-content: space-between;
        .logo-box{
            display: flex;
            align-items: center;
            img{
                height: 48px;
                margin-right: 10px;
            }
            span{
                font-weight: 700;
                font-size: 20px;
            }
        }
    }
    background-color: #293146;
    min-height: 100%;
    .form-wrap{
        display: flex;
        justify-content: center;
        padding-top: 150px;
        .form-card{
            border-radius: 14px;
            padding: 20px 150px;
            h2{
                margin: 0 0 40px 0;
                text-align: center;
                font-weight: 700;
                font-size: 26px;
            }
            .el-form-item{
                width: 448px;
                margin-bottom: 30px;
            }
        }
    }
}
</style>